<script>
import {defineComponent} from 'vue'
import axios from "axios";
export default defineComponent({
  name: "ComLogin",
    data(){
    return{
      formData:{
        username:"gucheng",
        password:"00000"
      }
    }
},methods: {
    doLogin() {
      /*
      if(this.formData.username==="maiJiaLi" && this.formData.password==="22334455"){
       /!* alert("登录成功")
        this.$router.push("lay")*!/
      }else {
        alert("登录失败！用户或密码输入错误")
      }*/

      console.log("login")
      if (this.formData.username !== null && this.formData.username !== "" && this.formData.password !== null) {
        //axios.post("http://localhost:8084/app04/login", this.formData, {
          axios.post("http://localhost:8084/app04/login", this.formData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => {
          console.log(res)
          if (res.data != null) {
            alert("111")
          } else {
            alert("登录失败")
          }
        });
      }
    }
  }

})
</script>

<template>
  <div class="bg">
    <div id="loginDiv" style="height: 350px">
      <div id="form">
        <h1 id="loginMsg">登录</h1>
        <div id="errorMsg"></div>
        <p><label for="username">用户名:</label>
          <input id="username" name="username" type="text" v-model="formData.username"></p>
        <p><label for="password">密&nbsp;&nbsp; 码:</label>
          <input id="password" name="password" type="password" v-model="formData.password"></p>
        <p><label for="remember">记住我:</label>
          <input id="remember" name="remember" value="1" type="checkbox"></p>
        <div id="subDiv">
          <input type="submit" class="button" value="登录" @click="doLogin">
          <input type="reset" class="button" value="重置">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
div.bg {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: url(../assets/Desert3.jpg) no-repeat 0 0;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loginDiv {
  width: 37%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 380px;
  background-color: rgba(75, 81, 95, 0.3);
  box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
  border-radius: 5px;
}

#name_trip {
  margin-left: 50px;
  color: red;
}

p {
  margin-top: 30px;
  margin-left: 20px;
  color: azure;
}


#remember {
  margin-left: 15px;
  border-radius: 5px;
  border-style: hidden;
  background-color: rgba(216, 191, 216, 0.5);
  outline: none;
  padding-left: 10px;
  height: 20px;
  width: 20px;
}

#username {
  width: 200px;
  margin-left: 15px;
  border-radius: 5px;
  border-style: hidden;
  height: 30px;
  background-color: rgba(216, 191, 216, 0.5);
  outline: none;
  color: #f0edf3;
  padding-left: 10px;
}

#password {
  width: 202px;
  margin-left: 15px;
  border-radius: 5px;
  border-style: hidden;
  height: 30px;
  background-color: rgba(216, 191, 216, 0.5);
  outline: none;
  color: #f0edf3;
  padding-left: 10px;
}

.button {
  border-color: cornsilk;
  background-color: rgba(100, 149, 237, .7);
  color: aliceblue;
  border-style: hidden;
  border-radius: 5px;
  width: 100px;
  height: 31px;
  font-size: 16px;
}

#subDiv {
  text-align: center;
  margin-top: 30px;
}

#loginMsg {
  text-align: center;
  color: aliceblue;
}

#errorMsg {
  text-align: center;
  color: red;
}
</style>